<template>
  <div class="containers">
    <div class="logo">
      <div class="logo-title">
        <img :src="logoImg" width="45" class="logo-img" />

        <div class="logo-title-txt">企业账号安全中心 |</div>
        <div class="logo-title-retxt">
          <span>重置密码</span>
        </div>
      </div>
      <div class="logo-login">
        <div class="logo-tab">
          <div class="logo-tab-txt1">设置您的新密码</div>
          <div class="logo-tab-txt2">为您的账号{{ '123' }}重置新密码</div>
        </div>

        <a-form
          class="form-box"
          :label-col="{ span: 5, offset: 2 }"
          :wrapper-col="{ span: 18 }"
          labelAlign="left"
          ref="formRef"
          :model="formState"
          name="basic"
          autocomplete="off"
          :rules="rules"
        >
          <a-form-item label="密码" name="username">
            <a-input v-model:value="formState.username" />
          </a-form-item>

          <a-form-item name="userpwd" label="确认密码" class="secd-input">
            <a-input-password v-model:value="formState.userpwd" />
          </a-form-item>
          <div class="bottom-item">
            <div style="display: flex"><div class="span">·</div> 必须至少8个字符</div>
            <div style="display: flex"><div class="span">·</div> 必须与邮件地址不同</div>
            <div style="display: flex"><div class="span">·</div> 必须包含大小不同的字母与数字</div>
            <div style="display: flex"><div class="span">·</div> 必须包含一个不是字母或数字的字符</div>
            <a-form-item :wrapper-col="{ offset: 0, span: 16 }" style="margintop: 10px" class="botton-item">
              <a-button size="large" type="primary" html-type="submit">确认</a-button>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
  import logo from '@/assets/icons/svg/logo.svg';
  import * as utils from '../../utils/index';
  const logoImg = new URL('../../assets/images/zhicheng/8f6a59aa-bb2c-435b-baa8-6b885dee3505.png', import.meta.url).href;

  const formState = reactive({
    username: '',
    userpwd: '',
    keyword: '',
  });
  const formRef = ref();
  const validatePass = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入用户名！');
    } else {
      if (formState.username !== '') {
        formRef.value.validateFields('checkPass');
      }
      return Promise.resolve();
    }
  };
  const validatePass1 = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入密码！');
    } else {
      if (formState.userpwd !== '') {
        // formRef.value.validateFields('checkPass');
        const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*\.?])[A-Za-z\d~!@#$%^&*\.?]{8,}/;
        if (!regex.test(formState.userpwd)) {
          return Promise.reject('请输入正确的格式！');
        }
      }
      return Promise.resolve();
    }
  };
  const validatePass2 = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入验证码！');
    } else {
      if (formState.username !== '') {
        formRef.value.validateFields('checkPass');
      }
      return Promise.resolve();
    }
  };
  const rules = {
    username: [
      {
        required: true,
        validator: validatePass,
        trigger: 'change',
      },
    ],
    userpwd: [
      {
        required: true,
        validator: validatePass1,
        trigger: 'change',
      },
    ],
    keyword: [
      {
        required: true,
        validator: validatePass2,
        trigger: 'change',
      },
    ],
  };
</script>

<style lang="less" scoped>
  .containers {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;

    .logo {
      width: 550px;
      height: 550px;

      font-style: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid pink;
      background-color: rgb(238, 240, 244);

      .logo-title {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: start;
        margin-left: -50px;
        .logo-img {
          line-height: 40px;
          margin-top: 17px;
        }

        .logo-title-txt {
          line-height: 80px;
          font-size: 26px;
          font-weight: 800;
        }
        .logo-title-retxt {
          line-height: 83px;
          font-size: 22px;
          font-weight: 800;
          margin-left: 13px;
        }
      }

      .logo-login {
        width: 295px;
        height: 100%;
        .secd-input {
          margin-left: -20ox;
        }
        .form-box {
          margin-left: -100px;
          .bottom-item {
            margin-left: 113px;
          }
          .span {
            font-size: 40px;
            line-height: 22px;
          }
          .botton-item {
            margin-top: 15px;
          }
        }
        .keyword-box {
          position: relative;
        }
        .forget-box {
          position: absolute;
          top: 3px;
          right: -120px;
          color: #1677ff;
          cursor: pointer;
        }
        .keyword-img-box {
          position: absolute;
          background: pink;
          width: 132px;
          height: 32px;
          top: 0;
          right: -132px;
        }

        .logo-tab {
          width: 350px;
          height: 40px;
          background-color: #fff;
          margin-bottom: 30px;
          margin-left: 13px;
          margin-top: 30px;
          background-color: rgb(238, 240, 244);

          .logo-tab-txt1 {
            font-size: 18px;
            font-weight: 600;
          }
          .logo-tab-txt2 {
            color: rgb(173, 180, 189);
          }
        }

        .logo-tab-title {
          height: 30px;
          width: 35px;
          border-bottom: 3px solid #1677ff;
          color: rgb(60, 151, 255);
        }
        .ant-btn-primary {
          width: 100px;
        }
      }
    }
  }
</style>
